<template>
	<view class="login-confirm">
		<van-popup :show="visible"  custom-style="width: 610rpx; height: 340rpx; padding: 85rpx 35rpx 21rpx; border-radius: 8rpx;" @click-overlay="hide">
			<div class="content">您还没有登录哦~</div>
			<div class="btn between-vertical">
				<button @click="hide">
			     	<span >再逛逛</span>
				</button>
			
				<button type="balanced" @click="getUniLogin">
						<span  class="my-btn">登录</span>
				</button>
			<!-- 	<button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event, 1)">
					<span  class="my-btn">登录</span>
				</button> -->
			</div>
		</van-popup>
		
		
		<van-action-sheet  @close="showEditUserInfo = false" :show="showEditUserInfo" title="请完善个人信息">
		  <view>
			   	<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			   	   <image class="user-img" :src='avatar'></image>
				</button>
				<view class='nickname'><input type='nickname' @change="blurNickName" name='nickname' v-model='userInfo.nickname' placeholder="请输入昵称"></input></view>
				
				<view @click="submitUserInfo" class="my-btn submit-btn">保存</view>
		  </view>
		</van-action-sheet>
	</view>
	
</template>

<script>
    import { mapState } from 'vuex'
	const FormData = require('../../utils/wxFormdata/formData.js')
	export default {
		data() {
			return {
				visible: false,
				showEditUserInfo: false,
				avatar: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/logo1.png',
				userInfo: {
					avatar: '',
					nickname: '',
					// email: ''
				},
				callback: null,
				phoneNumber: ''
			}
		},
		methods: {
			show() {
				this.visible = true;
			},
			hide() {
				this.visible = false;
			},
			getUniLogin(e) {
			  this.$getUniLogin().then((res)=>{
				  this.hide();
				  this.getInfo();
			  })
			},
			// 手机号授权
			getPhoneNumber(e, type) {		
				this.hide();
				const detail = e.detail;
				if (detail.errMsg === 'getPhoneNumber:ok') {
					  this.getUserPhoneNumber(detail.code);
				}
			
			},
			getUserPhoneNumber(code) {
				this.$http.getUserPhoneNumber({code}).then(res=>{
					this.phoneNumber = res.data;
					this.$setStorage('phone', this.phoneNumber);
					// this.$refs.loginRef.show(this.phoneNumber);
					this.getInfo()
					
				});
			},
			blurNickName(e) {
			 	this.userInfo.nickname = e.detail.value;
			 	// xxx
			 },
			getInfo () {
				this.$http.getUserInfo().then(res => {
					if(!res.nickname || !res.avatar) {
						this.showEditUserInfo = true;
						return;
					}
					this.$setStorage('userInfo',   res)
					this.reloadPage();
				})
			},
					
			onChooseavatar(e) {
				const {avatarUrl} = e.detail;
				this.avatar= avatarUrl;
				this.userInfo.avatar = avatarUrl;
			},
			submitUserInfo() {
				if(!this.userInfo.avatar) {
					return 	this.$toast('请上传用户头像！');
				}
				if(!this.userInfo.nickname) {
					return 	this.$toast('请填写用户昵称！');
				}
				let formData = new FormData();
				formData.append("nickname", this.userInfo.nickname);
				formData.appendFile("avatar", this.userInfo.avatar);
				// formData.append("email", '');
				let data = formData.getData();
				wx.request({
				  url: this.$getBaseUrl() + '/update-profile',
				  header: {
				    'content-type': data.contentType,
					'Accept': 'application/json,text/plain, */*',
					'Authorization': this.$getStorage('token') ?'Bearer '+ this.$getStorage('token') : ''
				  },
				  method: 'post',
				  data: data.buffer,
				  success: (res) => {
					  this.showEditUserInfo = false;
					  // this.callback();
					  this.$toast('登录成功');
					  this.$emit('loginSuccess', true);
				  }
				});
			},
			goBack() {
				const _this = this
				uni.navigateBack({
					delta:1,
					success: function() {
						// _this.reloadPage()
					}
				});
			},
			reloadPage() {
			  // 页面重载
			          const pages = getCurrentPages()
			          // 声明一个pages使用getCurrentPages方法
			          const curPage = pages[pages.length - 1]
			          // 声明一个当前页面
			          curPage.onLoad(curPage.options) // 传入参数
			          curPage.onShow()
			          curPage.onReady()
			
			}
		}
	}
</script>

<style  lang="scss">
	.login-confirm {
		text-align: center;
		.content {
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #212121;
		}
		.btn {
			span {
				display: inline-block;
				width: 260rpx;
				height: 76rpx;
				line-height:  76rpx;
				box-sizing: border-box;
				border-radius: 42rpx;
				font-size: 32rpx;
				vertical-align: middle;
				border: 2rpx solid #979797;
			    background-color: #fff;
				color: #333;
				
			}
			
		}
		.my-btn  {
		   background-color: #FFD700 !important;
		   color: #000!important;
		   border: none!important;
		}
		.user-img {
			margin: 50rpx auto  25rpx;
			width: 116rpx;
			height: 116rpx;
			display: inline-block;
			vertical-align: middle;
			border-radius: 50%;
		}
		.nickname {
			width: 200rpx;
			text-align: center;
			margin: 0 auto 60rpx;
		}
		.submit-btn {
			display: inline-block;
			width: 260rpx;
			height: 76rpx;
			line-height:  76rpx;
			box-sizing: border-box;
			border-radius: 42rpx;
			font-size: 32rpx;
			background-color: #FFD700 !important;
			color: #000!important;
			border: none!important;
			margin: 0 auto 60rpx;
		}
	}
</style>
